<template>
  <div>
      <el-button type="primary" icon="el-icon-edit" @click="addSwiper" style="margin-left:10px">添加按钮</el-button>  
      <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="60" align="center">
    </el-table-column>
    <el-table-column
      label="商品名称"
      width="300" align="center">
      <template #default="scope">{{ scope.row.goodsName }}</template>
    </el-table-column>
    <el-table-column
      prop="openType"
      label="打开方式"
      width="300" align="center">
       <template #default="scope">{{ scope.row.openType}}</template>
    </el-table-column>
    <el-table-column
      prop="imagesSrc"
      label="轮播图片"
    align="center" width="500px">
        <template #default="scope">
             <el-image
             style="width: 200px; height: 100px"
            :src="scope.row.imagesSrc"
            fit="scale-down"></el-image>
        </template>
    </el-table-column>
    <el-table-column label="创建时间" align="center" width="200px">
        <template #default="scope">
            {{scope.row.createTime}}
        </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
        <template #default="scope">
            <i class="el-icon-delete" @click="delSwiper(scope.row)"></i>
        </template>
    </el-table-column>
  </el-table>
  <!-- 模态框 -->
    <el-dialog title="添加轮播图" :visible.sync="editVisible" width="40%">
        <el-form ref="swiper" :model="swiper" label-width="70px">
                <el-form-item label="所属商品">
                    <el-select v-model="swiper.goodsId" placeholder="请选择">
                       <el-option
                       v-for="item in goodsData"
                       :key="item.goodsId"
                       :label="item.goodsName"
                       :value="item.goodsId"
                        >
                  </el-option>
                </el-select>
                </el-form-item>
                 <el-form-item label="轮播图片">
                    <el-upload
                        class="upload-demo"
                        drag
                        action="http://localhost:8002/admin/swiper/upload"
                        :on-success="swiperUpload"
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <template #tip>
                          <div class="el-upload__tip">
                            只能上传 jpg/png 文件，且不超过 500kb
                          </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveSwiper">确 定</el-button>
                </span>
            </template>
        </el-dialog>
   </div>
</template>

<script>
import {swiperAll,goodsAll,addSwiper,delSwiper} from '@/api/index'
export default {
     data(){
         return{
             tableData:[],
             goodsName:"",
             goodsData:[],
             editVisible:false,
             images:"",
             swiper:{
                 goodsId:"",
                 openType:"",
                 imagesSrc:""
             }
         }
     },
     created(){
         this.getSwiperAll()
     },
     methods:{
        //  上传轮播图
        swiperUpload(response, file, fileList){
           this.swiper.imagesSrc= response.data.data
        },
        //  轮播图的添加模态框
        addSwiper(){
            this.editVisible=true
            goodsAll().then(res=>{
                 this.goodsData=res.data.all
            })
        },
        //添加轮播图
        saveSwiper(){
            let params =new  FormData();
            params.append("goodsId",this.swiper.goodsId);
            params.append("openType","navigator");
            params.append("imagesSrc",this.swiper.imagesSrc);
            params.append("navigatorUrl","/admin/goods/info/"+this.swiper.goodsId);
            addSwiper(params).then(res=>{
                if(res.code==200){
                    this.$message.success("添加成功");
                    this.editVisible=false
                    this.getSwiperAll();
                }
            })
        },
         handleSelectionChange(val){
             console.log(val)
         },
        delSwiper(row){
          this.$confirm('是否删除【'+row.goodsName+"】", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delSwiper(row.id).then(res=>{
              if(res.code==200){
                  this.$message.success("删除成功");
                   this.getSwiperAll();
              }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        },
        getSwiperAll(){
            swiperAll().then(({data})=>{
                this.tableData=data.all
            })
        }
     }
}
</script>

<style>

</style>